<template>
	<div class="feedback bg-f5">
		<div class="mb10">
			<textarea class="full-width pt15 pb15 pl15 pr15 block" rows="10" placeholder="请输入您反馈的内容" maxlength="500" v-model="form.content" style="height:160px"></textarea>
			<p class="align-right bg-white pb15 pl15 pr15"><span class="fs14 c85">{{ form.content.length }}</span>/<span class="fs14 c85">500</span></p>
		</div>
		<div class="bg-white container mb10">
			<i class="red">*</i>
			<input type="text" class="pt15 pb15 w92" placeholder="请输入您的姓名" v-model="form.nickname">
		</div>
		<div class="bg-white container">
			<i class="red">*</i>
			<input type="number" class="pt15 pb15 w92" placeholder="请输入您的联系方式" v-model="form.contact">
		</div>
		<button class="btn-button pt15 pb15 radius auto w74" :class="{ on : boolean }" style="margin-top:15%;" @click="submit">提交</button>
	</div>
</template>

<script>
	export default{
		data()
		{
			return{
				verify : false,
				form   : {
					content    : '',
					nickname   : '',
					contact    : '',
				}
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;

				
 				if( this.form.content && this.form.nickname && this.form.contact )
				{
					this.verify = true;
					boolean = true;
				}
				else
				{
					this.verify = false;
					boolean = false;
				}

				return boolean;
			}
		},
		methods:
		{
			submit()
			{
				if(!this.verify) return;
				
				this.$http.post('/setting/feedback',this.form,{ headers : { Authorization : this.$route.query.token } } ).then(res => {
					// this.$router.replace('/personal');
				})
			}
		}
	}
</script>

<style lang="less">
	.feedback{
		.on{
			background-color:#ff0036;
			color: white;
		}
	}	
</style>
